<template>
	<view class="prodetail">
		<swiper
			class="swiper"
			:indicator-dots="true"
			indicator-color="rgba(255, 255, 255, 0.5)"
			indicator-active-color="#fff"
			:autoplay="true"
			circular>
			<swiper-item
				v-for="item in images"
				:key="item.file_id">
				<image :src="item.external_url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 商品说明 -->
		<view class="info">
		    <view class="title">
		        <view class="price">
					<text class="now">￥{{ detail.goods_price_min }}</text>
					<text class="oldprice">￥{{ detail.goods_price_max }}</text>
		        </view>
		        <view class="sellcount">已售{{ detail.goods_sales }}件</view>
		    </view>
		    <view class="msg text-ellipsis-2">{{ detail.goods_name }}</view>
		    <view class="service">
		        <view class="left-words">
					<view class="left-wrods-name"><icon type="success" color="#fa2209" size="16" />七天无理由退货</view>
					<view class="left-wrods-name"><icon type="success" color="#fa2209" size="16" />48小时发货</view>
		        </view>
		        <view class="right-icon"> > </view>
		    </view>
		</view>
		<!-- 商品评价 -->
		<view class="comment">
		    <view class="comment-title">
		        <view class="left">商品评价 ({{ total }}条)</view>
		        <view class="right">查看更多 ></view>
		    </view>
		    <view class="comment-list">
		        <view class="comment-item" v-for="item in commonList" :key="item.comment_id">
					<view class="top">
						<image :src="item.user.avatar_url || defaultImg" mode="widthFix" alt="">
						<view class="name">{{ item.user.nick_name }}</view>
					</view>
					<view class="content">{{ item.content }}</view>
					<view class="time">{{ item.create_time }}</view>
		        </view>
		    </view>
		</view>
		<!-- 商品描述 -->
		<view class="desc" v-html="detail.content"></view>
		<!-- 底部 -->
		<view class="footer">
		    <view class="icon-home" @tap="handleToHome">
				<text class="iconfont icon-shouye"></text>
		        <text>首页</text>
		    </view>
		    <view class="icon-cart" @tap="handleToCart">
		        <text v-if="cartTotal > 0" class="num">{{ cartTotal }}</text>
				<text class="iconfont icon-gouwuche"></text>
		        <text>购物车</text>
		    </view>
		    <view class="btn-add" @tap="addFn">加入购物车</view>
		    <view class="btn-buy" @tap="buyFn">立刻购买</view>
		</view>
		<!-- 加入购物车的弹层 -->
		<u-action-sheet :show="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'" @close="showPannel = false">
		    <view class="product">
		        <view class="product-title">
					<view class="left">
						<image :src="detail.goods_image" mode="widthFix" alt="">
					</view>
					<view class="right">
						<view class="price">
							<text>¥</text>
							<text class="nowprice">{{ detail.goods_price_min }}</text>
						</view>
						<view class="count">
							<text>库存</text>
							<text>{{ detail.stock_total }}</text>
						</view>
					</view>
		        </view>
		        <view class="num-box">
					<text>数量</text>
					<CountBox v-model="addCount" />
		        </view>
		        <view class="showbtn" v-if="detail.stock_total > 0">
					<view class="btn" v-if="mode === 'cart'" @click="addCart">加入购物车</view>
					<view class="btn now" v-if="mode === 'buyNow'" @click="goBuyNow">立刻购买</view>
		        </view>
		        <view class="btn-none" v-else>该商品已抢完</view>
		    </view>
		</u-action-sheet>
	</view>
</template>

<script>
	import { getProDetail, getProComments } from '@/api/prodetail'
	import defaultImg from '@/static/photos/default-avatar.png'
	import CountBox from '@/components/CountBox'

	export default {
		name: 'prodetail',
		data () {
			return {
				detail: {},
				images: [],
				commonList: [], // 评价列表内容
				total: 0, // 评价总条数
				defaultImg,
				mode: 'cart',
				showPannel: false,
				addCount: 1,
			}
		},
		components: {
			CountBox
		},
		onLoad (opt) {
			if (opt.id) {
				this.loadProDetail(opt.id)
				this.loadProComments(opt.id)
			}
		},
		methods: {
			// 获取详情页数据
			async loadProDetail (id) {
				const { detail } = await getProDetail(id)
				this.detail = detail
				this.images = detail.goods_images
			},
			// 加载详情页评论数据
			async loadProComments (id) {
				const { list, total } = await getProComments({
					goodsId: id,
					limit: 3
				})
				this.commonList = list
				this.total = total
			},
			// 去首页
			handleToHome () {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 去购物车
			handleToCart () {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			// 加入购物车
			addFn () {
				this.mode = 'cart'
				this.showPannel = true
			},
			// 立即购买
			buyFn () {
				this.mode = 'buyNow'
				this.showPannel = true
			},
		}
	}
</script>

<style lang="less" scoped>
.prodetail {
	width: 750rpx;
	height: 100vh;
	.swiper {
		width: 750rpx;
		height: 750rpx;
		image {
			width: 750rpx;
		}
	}
	// 商品说明
	.info {
		width: 750rpx;
		padding: 10px;
		box-sizing: border-box;
		.title {
			display: flex;
			justify-content: space-between;
			.now {
				color: #fa2209;
				font-size: 40rpx;
			}
			.oldprice {
				color: #959595;
				font-size: 32rpx;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
			.sellcount {
				color: #959595;
				font-size: 32rpx;
				position: relative;
				top: 8rpx;
			}
		}
		.msg {
			font-size: 32rpx;
			line-height: 48rpx;
			margin-top: 10rpx;
		}
		.service {
		    display: flex;
		    justify-content: space-between;
		    line-height: 80rpx;
		    margin-top: 20rpx;
		    font-size: 32rpx;
		    background-color: #fafafa;
		    .left-words {
				display: flex;
				align-items: center;
				.left-wrods-name {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					icon {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 8rpx;
					}
				}
		    }
		}
	}
	// 商品评价
	.comment {
	    padding: 20rpx;
		.comment-title {
			display: flex;
			justify-content: space-between;
			.right {
				color: #959595;
			}
		}
		.comment-item {
			font-size: 32rpx;
			line-height: 60rpx;
			.top {
				height: 60rpx;
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				.name {
					margin: 0 20rpx;
				}
			}
			.time {
				color: #999;
			}
		}
	}
	.desc {
		width: 750rpx;
		overflow: scroll;
		box-sizing: border-box;
		/deep/ img, image {
			display: block;
			max-width: 750rpx!important;
		}
	}
	.footer {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 110rpx;
	    background-color: #fff;
	    border-top: 2rpx solid #ccc;
	    display: flex;
	    justify-content: space-evenly;
	    align-items: center;
	    .icon-home, .icon-cart {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			.iconfont {
				font-size: 44rpx;
				color: #666;
			}
	    }
	    .btn-add,
	    .btn-buy {
	      height: 72rpx;
	      line-height: 72rpx;
	      width: 240rpx;
	      border-radius: 36rpx;
	      background-color: #ffa900;
	      text-align: center;
	      color: #fff;
	      font-size: 28rpx;
	    }
	    .btn-buy {
	      background-color: #fe5630;
	    }
	}
	// 产品弹窗
	.product {
		.product-title {
			display: flex;
			.left {
				margin: 20rpx;
				image {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.right {
				// flex: 1;
				padding: 20rpx;
				.price {
					font-size: 28rpx;
					color: #fe560a;
					.nowprice {
						font-size: 48rpx;
						margin: 0 10rpx;
					}
				}
			}
		}
		.num-box {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			align-items: center;
		}
		  .btn, .btn-none {
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx;
			border-radius: 40rpx;
			text-align: center;
			color: rgb(255, 255, 255);
			background-color: rgb(255, 148, 2);
		}
		.btn.now {
			background-color: #fe5630;
		}
		.btn-none {
			background-color: #cccccc;
		}
	}
}
</style>
